<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>结算页</title>
  <link rel="stylesheet" type="text/css" href="./css/webbase.css" />
  <link rel="stylesheet" type="text/css" href="./css/pages-getOrderInfo.css" />
  <link rel="stylesheet" type="text/css" href="./css/orderInfo.css" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="orderApp">
    <div class="cart py-container">
      <div class="logoArea">
        <span>订单确认 </span>
      </div>
      <div class="checkout py-container">
        <div class="checkout-tit">
          <h4 class="tit-txt">填写并核对订单信息</h4>
        </div>
        <div class="checkout-steps">
          <!--收件人信息-->
          <el-collapse v-model="activeNames">
            <el-collapse-item title="收件人信息" name="1">
              <el-form :model="params" :rules="rules" ref="orderForm" label-width="100px">
                <el-form-item label="姓名" prop="contact">
                  <el-input v-model="params.contact"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                  <el-input v-model="params.mobile"></el-input>
                </el-form-item>
                <el-form-item label="国家" prop="country">
                  <el-input v-model="params.country"></el-input>
                </el-form-item>
                <el-form-item label="州/省" prop="state">
                  <el-input v-model="params.state"></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city">
                  <el-input v-model="params.city"></el-input>
                </el-form-item>
                <el-form-item label="街道地址" prop="street">
                  <el-input v-model="params.street"></el-input>
                </el-form-item>
                <el-form-item label="邮编" prop="zipCode">
                  <el-input v-model="params.zipCode"></el-input>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>

          <!--支付和送货-->
          <div class="payshipInfo">
            <div class="step-tit">
              <h5>送货清单</h5>
            </div>
            <div class="step-cont">
              <ul class="send-detail">
                <li v-for="item in items" :key="item.id" class="sendGoods">
                  <div>
                    <ul class="yui3-g">
                      <li class="yui3-u-1-8">
                        <span><img :src="item.mainImage" width="100" height="100" /></span>
                      </li>
                      <li class="yui3-u-7-12">
                        <div class="desc">{{item.name}}</div>
                        <div>
                          <span>Zoom Pegasus 41 Running</span>
                        </div>
                        <div class="seven">
                          <div v-for="(v,k) in parseJson(item.spec)">
                            <span style="color: #504f4f">{{k}}</span> : {{v}}
                          </div>
                        </div>
                      </li>
                      <li class="yui3-u-1-12">
                        <div>&nbsp;</div>
                        <div class="price">￥{{item.price}}</div>
                      </li>
                      <li class="yui3-u-1-12">
                        <div style="width: 60px; text-align: right">
                          <button class="num-btn" @click="incNum(item)">+</button>
                          <div class="num">
                            <span>×</span>&nbsp;&nbsp;&nbsp;<input style="width: 22px" type="text" v-model="item.num">
                          </div>
                          <button class="num-btn" @click="decNum(item)">-</button>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="order-summary">
        <div class="static fr">
          <div class="list">
            <span><i class="number">{{items.length}}</i>件商品，总金额:</span>
            <em class="allprice">¥{{totalPrice}}</em>
          </div>
        </div>
      </div>
      <div class="clearfix trade">
        <div class="fc-price">应付金额:　<span class="price">¥{{totalPrice}}</span></div>
        <div class="fc-receiverInfo">寄送至: {{address}}</div>
      </div>
      <div class="submit">
        <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" :disabled="disButton" @click="submitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script src="js/common.js"></script>
  <script>
    let orderApp = new Vue({
      el: "#orderApp",
      data() {
        return {
          util,
          items: [], // 商品信息
          params: {
            userId: 1,
            contact: '',
            mobile: '',
            country: '',
            state: '',
            city: '',
            street: '',
            zipCode: '',
            voList: [],
            paymentType: 3, // 支付方式
          },
          rules: {
            contact: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
            country: [{ required: true, message: '请输入国家', trigger: 'blur' }],
            state: [{ required: true, message: '请输入州/省', trigger: 'blur' }],
            city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
            street: [{ required: true, message: '请输入街道地址', trigger: 'blur' }],
            zipCode: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
          },
          activeNames: ['1'], // 控制折叠面板的展开
          user: null,
          fullscreenLoading:false,
          disButton: false
        }
      },
      created() {
        this.getItem();
      },
      methods: {
        async getItem() {
          const urlParams = new URLSearchParams(window.location.search);

          const productId = urlParams.get('productId');

          const res = await axios.get('/products/get',{
            params: {
              id: productId
            }
          })
          res.data.num = 1
          this.items.push(res.data)
        },
        submitOrder() {

          this.$refs.orderForm.validate((valid) => {
            this.fullscreenLoading = true
            this.disButton = true
            if (valid) {
              let details = [];
              this.items.forEach(({ id, num }) => {
                details.push({ id , num })
              })
              this.params.voList = details;
              axios.post("/order/pay", this.params)
                .then(resp => {
                  console.log(resp.data)
                  const { code , msg , data } = resp
                  if ( code !== 200 ) {
                    this.$message({
                      message: msg,
                      type: 'error'
                    })
                    this.fullscreenLoading = false
                    this.disButton = false
                    return
                  }
                  window.open(data,"_self")
                  this.fullscreenLoading = false
                })

            } else {
              console.log('表单验证失败');
              return false;
            }
          });

        },
        handleMobile(mobile) {
          return mobile.substring(0, 4) + "****" + mobile.substring(8, 11)
        },
        incNum(item) {
          if (item.num < item.stockQuantity) {
            item.num++
          }
        },
        decNum(item) {
          if (item.num > 1) {
            item.num--
          }
        },
        parseJson(str) {
          if (!str) {
            return "";
          }
          return JSON.parse(str);
        }
      },
      computed: {
        address() {
          return this.params.country + " " + this.params.state + " " + this.params.city
            + " " + this.params.street + " 收件人："
            + this.params.contact + " " + this.handleMobile(this.params.mobile);
        },
        totalPrice() {
          let total = 0;
          this.items.forEach(i => {
            total += ((i.price) * i.num)
          })
          // return util.formatPrice(total);
          return total
        }
      }
    });
  </script>
</body>

</html>